<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插入和替换元素操作</title>
		<!-- 插入和替换元素操作：针对元素增删改操作
		 append()     功能：在匹配元素集合中所有元素的内部末尾插入内容
		 prepend()    功能：在匹配元素集合中所有元素的内部开头插入内容
		 
		 after()      功能：在匹配元素集合中所有元素的外部后面插入内容
		 before()     功能：在匹配元素集合中所有元素的外部前面插入内容
		 
		 remove()     功能：移除匹配元素集合中所有的元素和子元素【盒子模型都删掉】
		 empty()      功能：清空匹配元素集合中所有元素的内容【盒子模型不删掉】
		 
		 replaceWith()
		 -->
		<script src="../js/jquery-1.11.1(1).js"></script>
		<style>
			.body{
				margin: 20px;
			}
			#target{
				border: 1px solid red;
				padding: 10px;
				margin-top: 10px;
				margin-left: 5px;
			}
			button{
				margin: 5px;
				padding: 10px 15px;
				cursor: pointer;
			}
			.boss{
				width: 300px;
				height: 300px;
				 background-image:url(../img/1.gif);
				border-radius:50%;
				border:5px solid #ff557f;
				background-size:100%;
				color:transparent;
			}
		</style>
	</head>
	
	<body>
	<button id="appendBtn">内部末尾插入元素</button>
	<button id="prependBtn">内部开头插入元素</button>
	<button id="afterBtn">外部后面插入元素</button>
	<button id="beforeBtn">外部前面插入元素</button>
	<button id="removeBtn">删除元素</button>
	<button id="emptyBtn">清空元素</button>
	<button id="replaceBtn">替换元素</button>
	<!-- 目标显示区域 -->
	<div id="target">
		<p>目标元素的初始段落</p>
	</div>
	<!-- 用于插入跟替换的区域 -->
	<div id="newElement" style="display: none;">
		<p>插入新元素的初始段落</p>
	</div>
	<script>
		/* 1.点击 内部末尾插入元素  按钮  p文本后面追加新元素中包含内容操作 */
		$("#appendBtn").click(function(){
			//效果：点击按钮  追加“新元素---自带内容”
			//1.1 追加内容是新元素----克隆---html结构全部复制出来。元素包含属性
			var cpe=$("#newElement").clone();			
			//clone() 创建一个元素的副本，副本包含：内部元素以及所有属性和属性值
			//1.2 自带属性和属性值：隐藏---改成显示
			cpe.css("display","block");
			//1.3 将复制出来的新元素，追加给当前元素上
			$("#target").append(cpe);
		});
		
		
		/* 2.点击 内部开头插入元素  按钮  p文本后面追加新元素中包含内容操作 */
		$("#prependBtn").click(function(){
			//效果：点击按钮  追加“新元素---自带内容”
			//1.1 追加内容是新元素----克隆---html结构全部复制出来。元素包含属性
			var ppe=$("#newElement").clone();			
			//clone() 创建一个元素的副本，副本包含：内部元素以及所有属性和属性值
			//1.2 自带属性和属性值：隐藏---改成显示
			ppe.css("display","block");
			//1.3 将复制出来的新元素，追加给当前元素上
			$("#target").prepend(ppe);
		});
		/* 3. 点击 外部后面插入元素  按钮  p文本后面追加新元素中包含内容操作*/
		$("#afterBtn").click(function(){
			//效果：点击按钮  追加“新元素---自带内容”
			//1.1 追加内容是新元素----克隆---html结构全部复制出来。元素包含属性
			var ate=$("#newElement").clone();			
			//clone() 创建一个元素的副本，副本包含：内部元素以及所有属性和属性值
			//1.2 自带属性和属性值：隐藏---改成显示
			ate.css("display","block");
			//1.3 将复制出来的新元素，追加给当前元素上
			$("#target").after(ate);
			ate.addClass("boss");
		});
		/* 4. 点击 外部前面插入元素  按钮  生成圆形，保留背景色，文本不需要
		                                背景图 300*300*/
			$("#beforeBtn").click(function(){
				//效果：点击按钮  追加“新元素---自带内容”
				//1.1 追加内容是新元素----克隆---html结构全部复制出来。元素包含属性
				var bfe=$("#newElement").clone();			
				//clone() 创建一个元素的副本，副本包含：内部元素以及所有属性和属性值
				//1.2 自带属性和属性值：隐藏---改成显示
				bfe.css({"display":"block",
				"background-color":"#55ff7f",
				               "border":"5px solid #ff0",
							   "border-radius":"50%",
							   "width":"300px",
							   "height":"300px",
							   "box-shadow":"5px 5px 10px 2px rgba(0,0,0,0.5)",
							   "background-image":"url(../img/1.gif)",
							   "background-size":"100%",
							   "color":"transparent"
				});
				//1.3 将复制出来的新元素，追加给当前元素上
				$("#target").before(bfe);
			});	
									
									
			/* 5.点击  删除元素   按钮   页面上所有元素包括子元素全部删除【盒子模型】 */
				$("#removeBtn").click(function(){
					$("#target").remove();
				});	
			/* 6.点击  清空元素  按钮    页面上所有元素中内容全部删除【盒子模型不删除】 */	
				$("#emptyBtn").click(function(){
					$("#target").empty();
				});	
			/* 7.点击 替换元素  按钮   页面上目标元素替换为新元素 */
				$("#replaceBtn").click(function(){
					//克隆 新元素  #newElement【父子级】
					var c=$("#newElement").clone().css("display","block");
					//替换   找到目标元素   替换   新元素
					$("#target").replaceWith(c);
				});			
	</script>
	</body>
</html>